import React, { Component, PropTypes } from 'react';
import { Link } from "react-router";
import Module from '../../lib/module'

import { Button, Row, Col, Input, Slider, Tooltip, Breadcrumb } from 'antd';

import {store} from '../../../index';

import CarShow3D from "../carShow3D/"
import CarShow2D from "../carShow2D/"

const Search = Input.Search;

class CarStatus extends Module {
    constructor(props, context) {
        super(props, context);
        this.state = {
            currentCar: 'car1',
            //服务端返回信息
            carStatus: 1,   //车辆状态 0:休息 1:运行中  2:故障


        };
        this.timer = null;
    }

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    //车辆选择
    handleCarSelect(val) {
        //TODO 模拟数据
        let _status = 1;
        if(val == "car2") {
            _status = 2;
        }
        this.setState({
            currentCar: val,
            currentAngle: 0,
            carStatus: _status
        })
    }

    //车辆状态
    renderCarStatus() {
        let { carStatus } = this.state;
        if(carStatus === 0) {
            return (
                <div className="car-status rest">
                    休息中
                </div>
            )
        }
        if(carStatus === 1) {
            return (
                <div className="car-status">
                    工作状态正常
                </div>
            )
        }
        if(carStatus === 2) {
            return (
                <div className="car-status failure">
                    状态异常
                </div>
            )
        }
    }


    render() {
        let { currentCar, carStatus } = this.state;



        return <div className="N_car-status">

            <Breadcrumb className="N_Breadcrumb">
                <Breadcrumb.Item>车辆</Breadcrumb.Item>
                <Breadcrumb.Item><Link to="/CarStatus">车辆状态</Link></Breadcrumb.Item>
            </Breadcrumb>

            <div className="N_filter-bar">
                <span>归属门店:</span>
                <ul className="mt">
                    <li className="current">滨江店</li>
                    <li>西湖店</li>
                    <li>上城店</li>
                </ul>
            </div>
            <div className="N_filter-bar">
                <span>全部车辆:</span>
                <ul className="mt">
                    <li className="current">工作车辆</li>
                    <li>休息车辆</li>
                </ul>
                <ul className="mc">
                    <li className={(currentCar === "car1") && "current"} onClick={()=>{this.handleCarSelect("car1")}} >1号车辆</li>
                    <li className={(currentCar === "car2") && "current"} onClick={()=>{this.handleCarSelect("car2")}} >2号车辆</li>
                </ul>
            </div>

            <Row style={{margin: '30px auto'}}>
                <Col span={12} offset={6}>
                    <Search
                        placeholder="车辆编号查询"
                        enterButton="查询"
                        size="large"
                        onSearch={value => console.log(value)}
                    />
                </Col>
            </Row>

            <CarShow2D
                status={carStatus}
                currentCar={currentCar}
                speed={20}
            ></CarShow2D>


        </div>
    }
}

export default CarStatus;

// <div className="car-show-2d">
//     <div className="show-wrap">
//         <img src={cars[currentAngle]} />
//     </div>
//
//     <div style={{width: "400px", margin: '0 auto'}}>
//         <Slider marks={marks} step={null} value={currentAngle} onChange={(val)=> this.handleSlider(val)} />
//     </div>
//     {this.renderCarStatus()}
//
//     <div className="driver-info">
//         {(carStatus === 1) && <p>驾驶会员: 孟志刚</p>}
//         <p>当前工作时长: 22小时</p>
//         <p>工作总时长: 460小时</p>
//     </div>
//     {
//         (carStatus === 1) && <div id="gauge" style={{width: "100%", height:"300px"}}></div>
//     }
//
//     {
//         (carStatus === 2) && <div className="car-plan">
//             <img src="images/car-plan.png"/>
//
//             <Tooltip placement="right"
//                      title={
//                                  <div>
//                                     <div>异常问题: 方向盘异常</div>
//                                     <div>异常时间: 2018-09-09 12:00</div>
//                                     <div>维修记录: 无</div>
//                                     <div>修理电话: 12312341234</div>
//                                  </div>
//                                  }
//             >
//                 <div className="fix fix-a"></div>
//             </Tooltip>
//
//             <Tooltip placement="right" title={"异常原因"}>
//                 <div className="fix fix-b"></div>
//             </Tooltip>
//
//             <Tooltip placement="right" title={"异常原因"}>
//                 <div className="fix fix-c"></div>
//             </Tooltip>
//
//             <Tooltip placement="right" title={"异常原因"}>
//                 <div className="fix fix-d"></div>
//             </Tooltip>
//
//         </div>
//     }
//
// </div>


// <div className="car-show-2d">
//     <div className="show-wrap">
//         <img src={car1Map[currentAngle]} />
//     </div>
//     <div style={{width: "400px", margin: '0 auto'}}>
//         <Slider marks={marks} step={null} defaultValue={0} onChange={(val)=> this.handleSlider(val)} />
//     </div>
//     <div className="car-status failure">
//         状态异常
//     </div>
//     <div className="driver-info">
//         <p>当前工作时长: 22小时</p>
//         <p>工作总时长: 460小时</p>
//     </div>
//
// </div>

// <CarShow3D
//     height="300"
//     width="1000"
//     name="module_a"
//     car="j1"
// >
//     <div className="car-info">
//         <p>驾驶会员: 孟志刚</p>
//         <p>当前工作时长: 22小时</p>
//         <p>工作总时长: 460小时</p>
//     </div>
//     <div className="car-status-show normal">
//         <p>工作状态正常</p>
//     </div>
// </CarShow3D>
// <CarShow3D
// height="300"
// width="1000"
// name="module_b"
// car="j1"
//     >
//     <div className="car-info">
//     <p>当前工作时长: 22小时</p>
// <p>工作总时长: 460小时</p>
// </div>
// <div className="car-status-show unusual">
//     <p>状态异常</p>
//     </div>
//     </CarShow3D>